<template>
  <div class="calendar">
    <div style="width: 1.6rem;cursor: pointer"
         v-click-outside="handle"
         @click="openclb">
      <el-input
        @click.stop=""
        suffix-icon="el-icon-date" v-model="date">
      </el-input>
    </div>

    <!--日历-->
    <div class="c_l_b" v-show="clb">
      <!--时间选择-->
      <el-row>
        <el-col :span="1">
          <span>&nbsp;</span>
        </el-col>
        <el-col :span="7">
          <el-select v-model="c_year" @change="getday()">
            <el-option
              v-for="item in year_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1">
          <span>&nbsp;</span>
        </el-col>
        <el-col :span="7">
          <el-select v-model="c_months" @change="getday()">
            <el-option
              v-for="item in months_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1">
          <span>&nbsp;</span>
        </el-col>
        <el-col :span="7">
          <el-button
            @click="gotoday"
            style="background-color: #02C049;color: #FFFFFF">返回今天
          </el-button>
        </el-col>
      </el-row>
      <!--时间选择-->
      <!--分割线-->
      <div style="height: 1px;margin-top:.2rem;background-color: #02C049;"></div>
      <!--分割线-->
      <div class="c_d_b">

        <!--日期-->
        <div class="c_d_s"
             v-for="dl in day_list"
             :style="dl.status?'border: 2px solid #02C049;':'border:none'"
             @click="select_day(dl)">
          <div>
            <span>{{dl.day}}</span>
          </div>
          <div :title="dl.keywords">
            <span>{{dl.keywords}}</span>
          </div>
        </div>
        <!--日期-->

        <!--日期分割线-->
        <div class="d_l_g1"></div>
        <div class="d_l_g2"></div>
        <div class="d_l_g3"></div>
        <div class="d_l_g4"></div>
        <!--日期分割线-->
      </div>
    </div>
    <!--日历-->

  </div>
</template>
<script>
  import http from '../utils/http'
  import api from '../utils/api'

  const clickOutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
          return false
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
          binding.value(e)
        }
      }

      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.__vueClickOutside__ = documentHandler
      document.addEventListener('click', documentHandler)
    },
    update() {
    },
    unbind(el, binding) {
      // 解除事件监听
      document.removeEventListener('click', el.__vueClickOutside__)
      delete el.__vueClickOutside__
    }
  }
  export default {
    props: ['sampleId'],
    data() {
      return {
        isDcl: false,
        date: "",
        c_year: "",
        year_list: [],
        c_months: "",
        months_list: [],
        c_day: "",
        day_list: [],
        clb: false,
        t1: ""
      }
    },
    mounted() {

    },
    directives: {clickOutside},
    created() {
      this.initializeDtae();
      this.abilityList = sessionStorage.getItem('abilityList')
    },
    methods: {
      initializeDtae() {
        let t = new Date();
        let years = t.getFullYear();
        let months = t.getMonth() + 1;
        let dates = t.getDate();
        if (months >= 1 && months <= 9) {
          months = "0" + months;
        }
        if (dates >= 0 && dates <= 9) {
          dates = "0" + dates;
        }
        this.date = years + "-" + months + "-" + dates;
        this.c_year = years;
        this.c_months = months;
        this.c_day = dates;
        let yarr = [];
        for (let i = 10; i >= 0; i--) {
          let z = {
            value: parseInt(years) - i,
            label: parseInt(years) - i
          }
          yarr.push(z)
        }
        this.year_list = yarr;
        let marr = [];
        for (let ma = 12; ma > 0; ma--) {
          if (ma < 10) {
            ma = "0" + ma;
          }
          let zm = {
            value: ma,
            label: ma
          }
          marr.unshift(zm)
        }
        this.months_list = marr;
        this.getday();
      },
      getday() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.calendar + '?sampleId=' + vm.sampleId + '&year=' + vm.c_year + '&month=' + vm.c_months)
          if (res.data.code == '200') {
            res.data.data.forEach(e => {
              e['status'] = false;
              if (e.keywords == '') {
                e.keywords = '--'
              }
              if (e.day < 10) {
                e.day = '0' + e.day;
              }
              if (e.day == vm.c_day) {
                e.status = true;
              }
            })

            vm.day_list = res.data.data;

          } else {

          }
        })()
      },
      gotoday() {
        let t = new Date();
        let years = t.getFullYear();
        let months = t.getMonth() + 1;
        let dates = t.getDate();
        if (months >= 1 && months <= 9) {
          months = "0" + months;
        }
        if (dates >= 0 && dates <= 9) {
          dates = "0" + dates;
        }
        this.date = years + "-" + months + "-" + dates;
        this.c_year = years;
        this.c_months = months;
        this.c_day = dates;
        this.getday();
        this.$parent.trandate(this.date);
      },
      select_day(d) {
        this.c_day = d.day;
        this.date = this.c_year + "-" + this.c_months + "-" + d.day;
        this.$parent.trandate(this.date);
      },
      openclb() {
        this.day_list.forEach(e => {
          if (e.day == this.c_day) {
            e.status = true
          } else {
            e.status = false
          }
        })
        this.clb = true;
      },
      handle() {
        this.clb = false;
      }
    }
  }
</script>
<style scoped>
  .calendar {
    width: 1.6rem;
    margin-top: .1rem;
    position: relative;
  }

  .c_l_b {
    width: 5rem;
    position: absolute;
    top: 0.4rem;
    left: 0;
    padding: .1rem .2rem;
    border-radius: 4px;
    border: 1px solid #02C049;
    background-color: #fff;
    z-index: 99;
    overflow: hidden;
  }

  .c_d_b {
    width: 100%;
    height: 3.1rem;
    overflow: hidden;
    position: relative;
  }

  .c_d_s {
    width: 14.2%;
    height: .6rem;
    float: left;
    margin-bottom: 1px;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
  }

  .c_d_s > div {
    width: 100%;
    text-align: center;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*.c_d_s:hover {*/
  /*border: 2px solid #02C049;*/
  /*}*/

  .c_d_s > div:nth-child(1) {
    font-size: .18rem;
    font-weight: 600;
    line-height: .35rem;
  }

  .c_d_s > div:nth-child(2) {
    font-size: .16rem;
    color: #999999;
  }

  .d_l_g1 {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: .6rem;
    background-color: #c8cacc;
    overflow: hidden;
  }

  .d_l_g2 {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 1.2rem;
    background-color: #c8cacc;
    overflow: hidden;
  }

  .d_l_g3 {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 1.8rem;
    background-color: #c8cacc;
    overflow: hidden;
  }

  .d_l_g4 {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 2.4rem;
    background-color: #c8cacc;
    overflow: hidden;
  }
</style>

